/**
 * 独立组件
 * 未完成，临时
 */

import React, { FC, ReactElement } from "react";
import "./index.less";

import { _prefixCls, _mergeCls } from "@gaoges/utils";
import { Icon } from "@mui/material";

interface TagProps {
  color?: string;
  size?: "middle" | "small" | "large";
  icon?: string;
  closable?: boolean;
  context?: string | number | ReactElement;
  children?: string | number | ReactElement;
  onClose?: () => void;
}

// TODO 临时声明
let temp_prefixCls = (prefix: string) => {
  temp_prefixCls = (...args) => {
    const temp_Clses = args.map(cls => prefix + cls);
    return temp_Clses.join(" ");
  };
  return ""; // 这里返回值是为了应付TS检查
};
// _prefixCls("giui-tag-");
temp_prefixCls("giui-tag-");

const Tag: FC<TagProps> = ({ color, size, icon, context, children }) => {
  const wrapperCls = temp_prefixCls("");

  const getTagTitle = () => {
    if (typeof children === "number" || typeof children === "string") {
      return String(children);
    } else if (typeof context === "number" || typeof context === "string") {
      return String(context);
    }
    return undefined;
  };

  const getStyleCls = () => {
    if (color === undefined) return "";
    switch (color) {
      case "magenta":
      case "red":
      case "volcano":
      case "orange":
      case "gold":
      case "lime":
      case "green":
      case "cyan":
      case "blue":
      case "geekblue":
      case "purple":
        return temp_prefixCls(color);
      default:
        return temp_prefixCls("has-color");
    }
  };
  const styleCls = getStyleCls();
  const clses = _mergeCls(wrapperCls, styleCls);
  const getTagStyle = () => {
    if (styleCls !== "giui-tag-has-color") return {};
    return { color: "#fff", backgroundColor: color, border: `1px solid ${color}` };
  };
  return (
    <span className={clses} title={getTagTitle()} style={getTagStyle()}>
      {icon && <Icon />}
      {children || context}
    </span>
  );
};

Tag.defaultProps = {
  size: "middle"
};

export default Tag;
